<template>
  <div class="el-tree-container">
    <ul
      v-for="item in list"
      @click.stop="handleItem(item)"
      :key="item.id"
      v-show="item.show"
    >
      <li>{{ item.name }}</li>
      <el-tree v-if="item.children" :list="item.children"></el-tree>
    </ul>
  </div>
</template>

<script>
// import
// 递归：自己调用自己，就是递归
export default {
  name: 'el-tree',
  props: {
    list: {
      type: Array,
    },
  },
  methods: {
    handleItem(item) {
      if (item.children) {
        item.children.forEach((v) => {
          v.show = !v.show
        })
      }
    },
  },
}
</script>

<style></style>
